<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件路径输入和线程数输入</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f4f4f9;
            color: #333;
            line-height: 1.5;
            letter-spacing: 0.02em;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #fff;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-radius: 0.375rem;
            display: flex;
            gap: 2rem;
        }

        h1 {
            font-size: 2.25rem;
            font-weight: 700;
            text-align: center;
            color: #2d3748;
            margin-bottom: 2rem;
        }

        form {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        label {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        input[type="text"],
        input[type="number"] {
            margin-bottom: 1rem;
            padding: 0.75rem;
            border: 1px solid #e2e8f0;
            border-radius: 0.375rem;
            width: 100%;
        }

        input[type="submit"] {
            background-color: #4299e1;
            color: #fff;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #3182ce;
        }

        .error {
            color: red;
            min-height: 1.5rem;
            display: block;
        }

        .file-browser {
            flex: 1;
        }

        input[type="button"] {
            margin-bottom: 1rem;
            padding: 0.75rem;
            border: 1px solid #e2e8f0; /* 添加边框 */
            background-color: #fff; /* 设置背景颜色为白色 */
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        input[type="button"]:hover {
            background-color: #e2f0ff; /* 鼠标悬停时的背景颜色 */
        }

        #file-list {
            height: 600px;
            border: 1px solid #e2e8f0;
            border-radius: 0.375rem;
            padding: 0.5rem;
            overflow-y: auto;
        }

        .tree {
            list-style-type: none;
            padding-left: 20px;
        }

        .tree li {
            margin-bottom: 5px;
            cursor: pointer;
        }

        .tree li.directory::before {
            content: '📁 ';
        }

        .tree li.file::before {
            content: '📄 ';
        }

        .tree li.selected {
            background-color: #e2f0ff;
        }

        .tree li ul {
            display: none;
        }

        .tree li.expanded > ul {
            display: block;
        }

        /* 新增样式，让按钮和输入框水平对齐 */
        .button-container {
            display: flex;
            flex-direction: column;
            justify-content: start;
            gap: 2.9rem;
            padding-top: 1.6rem;
            /*padding-top: calc(1.85rem - 2px);  让按钮上移 2px */
        }


    </style>
    <script>
        let selectedFilePath = '';

        function transferFilePath(inputId) {
            const input = document.getElementById(inputId);
            input.value = selectedFilePath;
        }

        function selectFile(path) {
            const selectedLi = document.querySelector('.tree li.selected');
            if (selectedLi) {
                selectedLi.classList.remove('selected');
            }
            const newSelectedLi = document.querySelector(`.tree li[data-path="${path}"]`);
            if (newSelectedLi) {
                newSelectedLi.classList.add('selected');
            }
            selectedFilePath = path;
        }

        function toggleFolder(li) {
            li.classList.toggle('expanded');
        }

        function renderTree(tree, parentElement, basePath = '') {
            const ul = document.createElement('ul');
            ul.classList.add('tree');
            tree.forEach(item => {
                const li = document.createElement('li');
                li.classList.add(item.type);
                const fullPath = basePath ? `${basePath}/${item.name}` : item.name;
                li.textContent = item.name;
                li.setAttribute('data-path', fullPath);
                li.addEventListener('click', (event) => {
                    if (item.type === 'file') {
                        selectFile(fullPath);
                        event.stopPropagation();
                    } else if (item.type === 'directory') {
                        toggleFolder(li);
                        event.stopPropagation(); // 阻止事件冒泡
                    }
                });
                if (item.children) {
                    renderTree(item.children, li, fullPath);
                }
                ul.appendChild(li);
            });
            parentElement.appendChild(ul);
        }

        window.onload = async () => {
            const response = await fetch('/get_config_tree');
            const tree = await response.json();
            const fileList = document.getElementById('file-list');
            renderTree(tree, fileList);
        };
    </script>
</head>

<body>
    <div class="container">
        <!-- 第一纵：文件列表 -->
        <div class="file-browser">
            <div id="file-list"></div>
        </div>
        <!-- 第二纵：按钮 -->
        <div class="button-container">
            <input type="button" class="button-1" value=">" onclick="transferFilePath('host_file_path')">
            <input type="button" class="button-2" value=">" onclick="transferFilePath('group_file_path')">
            <input type="button" class="button-3" value=">" onclick="transferFilePath('action_file_path')">
        </div>
        <!-- 第三纵：表单 -->
        <form method="post">
            <div>
                <label for="host_file_path">输入主机文件路径</label>
                <input type="text" id="host_file_path" name="host_file_path"
                    value="{{ host_file_path if host_file_path else default_hosts_file }}">
                <span class="error">
                    {% if error_messages.get('hosts_config_file') %}
                    {{ error_messages.hosts_config_file }}
                    {% endif %}
                </span>
            </div>
            <div>
                <label for="group_file_path">输入群组文件路径</label>
                <input type="text" id="group_file_path" name="group_file_path"
                    value="{{ group_file_path if group_file_path else default_groups_file }}">
                <span class="error">
                    {% if error_messages.get('groups_config_file') %}
                    {{ error_messages.groups_config_file }}
                    {% endif %}
                </span>
            </div>
            <div>
                <label for="action_file_path">输入动作文件路径</label>
                <input type="text" id="action_file_path" name="action_file_path"
                    value="{{ action_file_path if action_file_path else default_action_file }}">
                <span class="error">
                    {% if error_messages.get('action_file') %}
                    {{ error_messages.action_file }}
                    {% endif %}
                </span>
            </div>
            <div>
                <label for="max_workers">并发执行的线程数</label>
                <input type="number" id="max_workers" name="max_workers" min="1"
                    value="{{ max_workers if max_workers else 1 }}">
                {% if error_messages.get('workers') %}
                <span class="error">{{ error_messages.workers }}</span>
                {% endif %}
            </div>
            <input type="submit" value="运行">
        </form>
    </div>
</body>

</html>